<template>
  <view class="gold_record_content" :style="'padding-top: ' + menuButton.bottom + 'px'">
    <Head title="积分明细" :transparent="false">
      <!-- <text slot="action">搜索</text> -->
    </Head>
    <view class="gold_record_box">
      <view class="gold_record_item" v-for="(item,index) in recordList" :key="index">
        <view class="title">{{item.title}}</view>
        <view class="time">{{format(item.createdAt)}}</view>
        <view class="change" :class="item.change >= 0 ? 'change_add' : 'change_reduce'">{{item.change}}</view>
      </view>
    </view>
    <view class="cu-load bg-grey" v-if="isLoad" :class="finished?'over':'loading'"></view>
    <NoData v-if="!isLoad && recordList && recordList.length <= 0">
      <view slot="text">暂无积分明细，建议签到试试</view>
    </noData>
    <ScrollToTop :scrollTop="scrollTop" />
  </view>
</template>

<script>
  import Head from '@/pages/pagecomponents/head'
  import NoData from '@/pages/pagecomponents/nodata'
  import ScrollToTop from '@/pages/pagecomponents/other/scrolltotop'
  export default {
    components: {
      Head,
      NoData,
      ScrollToTop,
    },
    data() {
      return {
        menuButton: this.menuButton,
        param: {
          pageNo: 1,
          pageSize: 10,
        },
        recordList: [],
        isLoad: false,
        finished: false,
        scrollTop: 0, // 页面滚动高度
      }
    },
    computed:{
      isDev(){
        return this.$store.state.isDev
      },
    },
    onPageScroll(e) {
      // 滚动条滚动
      this.scrollTop = e.scrollTop
    },
    onPullDownRefresh() {
      // 下拉刷新
      this.getList('pullDown')
    },
    onReachBottom() {
      // 触底函数
      this.nextPaging()
    },
    onLoad() {
      this.getList()
    },
    methods: {
      nextPaging() {
        // 下一页
        if (this.finished !== true) {
          this.param.pageNo += 1
          this.getList()
        }
      },
      getList(type) {
        if (type === 'pullDown') {
          // 下拉刷新
          this.isLoad = true
          this.recordList = []
          this.param.pageNo = 1
          this.param.pageSize = 10
        }
        this.isLoad = true
        this.$api.user.pagingGoldrecord(this.param).then(res => {
          if (type === 'pullDown') {
            // 下拉刷新
            uni.stopPullDownRefresh();
          }
          this.isLoad = false
          // this.recordList = res.data.list

          if (res.data.list && res.data.list.length <= 0) {
            this.finished = true;
          } else {
            let itemList = res.data.list
            let recordList = this.recordList
            recordList = recordList.concat(itemList)
            this.recordList = recordList
          }
        }).catch(err => {
          this.isLoad = false
          this.finished = true;
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .gold_record_content {
    position: relative;
    min-height: 100%;
    margin-top: var(--status-bar-height);
    padding: 50px 40upx 50upx;
    .gold_record_box {
      .gold_record_item {
        position: relative;
        padding: 30upx 0;
        border-bottom: solid 1px #e0e0e0;
        .title {
          width: 500upx;
          line-height: 60upx;
          font-size: 35upx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .time {
          color: #b1b6bd;
          line-height: 40upx;
          font-size: 30upx;
        }
        .change {
          position: absolute;
          top: 50upx;
          right: 40upx;
          font-size: 40upx;
        }
        .change_add {
          color: #6ada71;
        }
        .change_reduce {
          color: #f4757e;
        }
      }
    }
  }
</style>
